<template>
  <div>
    <div class="videocontainer">
      <div class="vi"  :key="index">
        
        <video v-if="navId==item.id" src="http://vfx.mtime.cn/Video/2019/03/21/mp4/190321153853126488.mp4"  controls  :id="i" class="video" style=""  @play="playVideo(i)" @ended="end(i)" >您的浏览器不支持 video 视屏播放。</video>
        <img v-else @click="changeNavId(item.id)"  :src="item.userImg">
        <div class="playCounts" :class="{'show':!navId===item.id}">▶播放量15w</div>
        <div class="currentTime" :class="{'show':!navId===item.id}">02:55</div>
        <div class="title p">{{item.title}}</div>
        <div class="videoItem">
          <p class="p">{{item.userName}}</p>
          <div class="d2">•••</div>
        </div>
      </div>
     
      <!-- 大视频 -->
      <!-- <div class="container">
       
         <video v-if="navId==bigVideo.title" :src="bigVideo.mp4Url"  controls  :id="bigVideo.title" class="video" style=""  @play="playVideo(bigVideo.title)" @ended="end(bigVideo.title)" >您的浏览器不支持 video 视屏播放。</video>
        
        <img class="bigImg" v-else  @click="changeNavId2(bigVideo.title)" :src="bigVideo.userImg">
        <div class="bigPlayCounts" :class="{'bigShow':navId===2}">▶播放量55w</div>
        <div class="bigCurrentTime" :class="{'bigShow':navId===2}">05:55</div>
        <div class="text">
          <div class="g">
            <h6 class="h6">{{bigVideo.userName}}</h6>
            <div class="g1">十&nbsp;&nbsp;关注</div>
          </div>
          <h6>{{bigVideo.title}}</h6>
          <div class="t1">
            <p>商业财经•投资理财呵呵</p>
            <div class="d3">•••</div>
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
import {getVideoData} from '@/api'
export default {
  name: "",
  data() {
    return {
      navId:'',
      ind:'',
      i:1,
      l:3,
      videoData:[]
    }
  },
  mounted() {
    //获取数据
    // this.getVideoData()
    
  },
  computed:{
    //计算大视屏数据
    // bigVideo(){
    //   return this.videoData[7]
    // },
    // videoList(){
    //   return this.videoData.splice(0,6)||[]
    // }
  },
  methods: {
    //显示视频
    changeNavId(id){
      console.log(typeof id)
      console.log( id)

      this.navId=id
    },
    //显示大视频
    // changeNavId2(title){
    //   this.navId=title
    // },
    //获取视屏信息
    async getVideoData(){
      const result=await getVideoData()
      console.log(result)

      console.log(result.videoData)
      if(result.code===200){
        this.videoData=result.videoData||[]
      }
    },
      //停止播放
      end(i) {
                var self=this
                console.log(i)
                window.location.href = "index?id=" + i;
            },
      //播放
      playVideo(j){
        var self=this
    //  ind是记录上次id，这次传过来的值如果不等上次的，肯定不等
        if(j!= self.ind){
    // 通过id获取，是获取上次的id，也就是正在播放的id
            var video1=document.getElementById(self.ind);
            console.log(j)
    //   第一个视频vido一定为空，所以要判断，否则程序出错
            if(video1==null){
                console.log("没有存在上次播放")
            }
            else{
    //  暂停上次的播放，开始这次的播放
                video1.pause();
            }
    //  记录这次的id，为下次做判断
            self.ind =j

      }
    }
  
}
}
</script>

<style lang="less" scoped>
.videocontainer {
  max-width: 375px;
  margin: auto;
  display: flex;
  background-color: rgb(72,105,145);
  flex-wrap: wrap;
  padding-left: 20px;
  padding: 50px 0;
  .vi {
    position: relative;
    flex: 1;
    align-items: center;
    margin-top: 10px;
    top: 20px;
    display: flex;
    flex-direction: column;
    width: 50%;
    margin: 5px 8px 4px 4px;
    background-color: rgb(255, 255, 255);
    border-radius: 12px;
    border: 1px solid #eee;
    height: 200px;
    video {
      // background-color: blue;
      width: 173px;
      height: 110px;
      border-radius: 8px 8px 0 0;
      object-fit:fill;
    }
    img{
      background-color: aquamarine;
      width: 173px;
      height: 110px;
      border-radius: 8px 8px 0 0;
    }
    .show{
      z-index: -999;
    }
    .currentTime{
      position: absolute;
      font-size: 12px;
      top: 46%;
      left: 76%;
      color: rgb(230,230,230);
    }
    .playCounts{
      position: absolute;
      font-size: 12px;
      color: rgb(230,230,230);
      top: 46%;
      left: 8%;

    }
    .title {
      width: 140px;
      font-size: 12px;
      margin: 10px;
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    p{
      font-size: 12px;
      color: rgb(147, 147, 147);
      float: left;
      // margin-left: 20px;
      // padding-left: 2px;
    }
    .d2 {
      float: right;
      font-size: 12px;
      margin-left: 50px;
      color: rgb(147, 147, 147);
    }
    
    .dd2{
      margin-left: 76px;
      
    }
    .active {
      color: rgb(248, 74, 18);
    }
      
  }
  //
  .container {
      border: 1px solid rgb(147, 147, 147);
      height: 290px;
      border-radius: 12px;
      position: relative;
      margin-left: 6px;
      margin-top: 12px;
      width: 358px;

    video {
      width: 358px;
      object-fit:fill;
      border: 1px solid #eee;
      border-radius: 10px 10px  0 0;
      height: 200px;
      // padding-right: 10px;
      background-color: salmon;
      text-align: center;
    }
    .bigImg{
      width: 358px;
      border: 1px solid #eee;
      border-radius: 10px 10px  0 0;
      height: 200px;
      text-align: center;
      // padding-right: 10px;
      // background-color: salmon;
    }
    .bigPlayCounts{
      position: absolute;
      font-size: 12px;
      left: 5%;
      top:60%;
      color: rgb(230,230,230);
    }
    .bigCurrentTime{
      position: absolute;
      font-size: 12px;
      left: 82%;
      top:60%;
      color: rgb(230,230,230);
    }
    .bigShow{
      z-index: -999;
    }
    h6,
    p,
    .d3 {
      font-size: 12px;
    }
    .h6 {
      padding-left: 20px;
      float:left;
      margin-right: 10px;
    }
    .g1{
        font-size: 12px;
        color: rgb(72,105,145);
        margin-bottom: 12px;
    }
    h6{
        margin-bottom: 12px ;
        margin-left: 8px;
    }
    .t1{
        margin: 0 8px;
        color: rgb(147, 147, 147);
    }
    .t1 p{
        float: left;
        
    }
    .t1 .d3{
        float:right;
    }
  }
}
</style>
